@mixin plan-progress-bar-color( $color ) {
	.progress-bar {
		background-color: darken( $color, 30% );
	}

	.progress-bar__progress {
		background-color: $color;
	}

	.progress-bar.is-pulsing .progress-bar__progress {
		background-image: linear-gradient(
			-45deg,
			$color 28%,
			lighten( $color, 5% ) 28%,
			lighten( $color, 5% ) 72%,
			$color 72%
		);
	}
}

.progress-bar {
	width: 100%;
	display: inline-block;
	position: relative;
	height: 9px;
	background-color: lighten( $gray, 20% );
	border-radius: 4.5px;

	&.is-compact {
		height: 4px;
	}
}

.progress-bar__progress {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: lighten( $blue-dark, 10% );
	border-radius: 4.5px;
	transition: width 200ms;
}

.progress-bar.is-pulsing .progress-bar__progress {
	animation: progress-bar-animation 3300ms infinite linear;

	background-size: 50px 100%;
	background-image: linear-gradient(
		-45deg,
		$blue-wordpress 28%,
		lighten( $blue-wordpress, 5% ) 28%,
		lighten( $blue-wordpress, 5% ) 72%,
		$blue-wordpress 72%
	);
}

.plan-thank-you-card {
	&.is-personal-plan {
		@include plan-progress-bar-color( $alert-yellow );
	}

	&.is-premium-plan {
		@include plan-progress-bar-color( $alert-green );
	}

	&.is-business-plan {
		@include plan-progress-bar-color( $alert-purple );
	}
}

@keyframes progress-bar-animation {
	0%   { background-position: 100px 0; }
	100% {  }
}

/* Percentage bar */
.percentage-bar {
	border-radius: 0;
	height: 8px;
	width: 150px;
	.progress-bar__progress{
		border-radius: 0;
	}
}
